import React, { useState } from 'react';
import {
  Grid,
  CssBaseline,
  ThemeProvider,
  Box,
  useMediaQuery,
  GlobalStyles,
} from '@mui/material';
import getTheme from 'themes/Theme';
import DashboardDrawer from 'components/organisms/DashboardDrawer';
import DashboardDrawerProtected from 'components/organisms/DashboardDrawerProtected';
import { SnackBar } from 'components/elements/SnackBar';
import Footer from 'components/ui/Footer';
import AnimatedFooter from 'components/ui/AnimatedFooter';
import { useDarkMode } from 'contexts/DarkMode';
import { useDashboardDrawer } from 'contexts/DashboardDrawerContext';
import { useDashboardDrawerProtected } from 'contexts/DashboardDrawerProtectedContext';
import { useLocation } from 'react-router-dom';
import getNewTheme from 'themes/NewTheme';
import ScrollToTop from 'components/ui/ScrollToTop';
import { AppBarProvider } from 'contexts/AppBarContext';
import CustomTreeView from 'components/organisms/CustomTreeView';
import AdaptiveLayout from 'components/elements/AdaptiveLayout';
import { useMenu } from 'contexts/MenuContext';
import App from 'components/organisms/App';
import Bar from 'components/organisms/Bar';

const PublicLayout = ({ children }) => {
  const { darkMode } = useDarkMode();
  const { dashboardDrawerOpen, toggleDashboardDrawer } = useDashboardDrawer();
  const { dashboardDrawerProtectedOpen, toggleDashboardDrawerProtected } = useDashboardDrawerProtected();
  const { isMenuOpen, toggleMenu } = useMenu();
  const isXs = useMediaQuery('(max-width:600px)');
  const location = useLocation();
  const isHomePage = location.pathname === '/home-page';
  // eslint-disable-next-line
  const [useTheme, setUseTheme] = useState(false);

  const theme = useTheme
    ? isHomePage
      ? getNewTheme(darkMode)
      : getNewTheme(darkMode, isXs)
    : isHomePage
      ? getTheme(darkMode)
      : getTheme(darkMode, isXs);
  
  return (
    <AppBarProvider>
      <ThemeProvider theme={theme}>
        <SnackBar>
          <CssBaseline />
          <GlobalStyles 
            styles={{
              'html, body': {
                minHeight: '100vh',
                margin: 0,
                padding: 0,
              },
              body: {
                background: useTheme
                  ? isHomePage
                    ? darkMode 
                      ? 'rgba(13, 14, 14, 1)'
                      : 'linear-gradient(135deg, rgba(0, 2, 3, 0.9) 0%, rgba(33, 33, 33, 0.9) 100%)'
                    : darkMode
                      ? '#000000'
                      : '#ffffff'
                  : isHomePage
                    ? darkMode
                      ? '#000000'
                      : '#ffffff !important'
                    : darkMode
                      ? '#000000'
                      : '#ffffff !important',
              },
            }}
          />
          
          <Box sx={{ height: '100vh', overflowY: 'auto' }}>
            <App 
              isHomePage={isHomePage}
              toggleDashboardDrawer={toggleDashboardDrawer}
              toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
              isMenuOpen={isMenuOpen}
              toggleMenu={toggleMenu}
              darkMode={darkMode}
              useOptions={false}
            />
            
            <Box
              sx={{
                position: 'absolute',
                top: 76,
                left: 0,
                right: 0,
                bottom: 0,
                height: {
                  xs: '80vh',
                  sm: '80%',
                },
                borderRadius: 20,
                overflow: 'hidden',
                zIndex: 1,
              }}
            >
              <Box
                id="scrollable-container"
                sx={{
                  height: '100%',
                  width: '100%',
                  overflowY: 'auto',
                  borderRadius: 20,
                  clipPath: 'inset(0 round 20px 20px 0 0)',
                }}
              >
                <Grid container columns={12}>
                  <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                    {!isXs ? (
                      <AdaptiveLayout
                        backgroundColor={null}
                        marginY={0}
                        paddingY={0}
                        paddingX={0}
                        centered={true}
                        fullWidth={true}
                        useInnerWrapper={true}
                      >
                        <DashboardDrawerProtected
                          anchor="left"
                          open={dashboardDrawerProtectedOpen}
                          toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
                          darkMode={darkMode}
                        />
                        <DashboardDrawer
                          anchor="left"
                          open={dashboardDrawerOpen}
                          toggleDashboardDrawer={toggleDashboardDrawer}
                          darkMode={darkMode}
                        />
                      </AdaptiveLayout>
                    ) : (
                      <>
                        <DashboardDrawerProtected
                          anchor="left"
                          open={dashboardDrawerProtectedOpen}
                          toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
                          darkMode={darkMode}
                        />
                        <DashboardDrawer
                          anchor="left"
                          open={dashboardDrawerOpen}
                          toggleDashboardDrawer={toggleDashboardDrawer}
                          darkMode={darkMode}
                        />
                      </>
                    )}
                  </Grid>
                  
                  <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                    <AdaptiveLayout
                      backgroundColor={null}
                      marginY={0}
                      paddingY={0}
                      paddingX={0}
                      centered={true}
                      fullWidth={true}
                      useInnerWrapper={true}
                    >
                      <Bar 
                        isHomePage={isHomePage}
                        useCover={true}
                        useOverlay={true}
                        useLoader={false}
                      />
                    </AdaptiveLayout>
                  </Grid>
                  
                  <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                    <AdaptiveLayout
                      backgroundColor={null}
                      marginY={0}
                      paddingY={0}
                      paddingX={0}
                      centered={true}
                      fullWidth={true}
                      useInnerWrapper={true}
                    >
                      <CustomTreeView 
                        toggleDashboardDrawer={toggleDashboardDrawer}
                        showIcons={true}
                        defaultExpanded={['1']}
                        darkMode={darkMode}
                      />
                    </AdaptiveLayout>
                  </Grid>
                  
                  <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                    <AdaptiveLayout
                      backgroundColor={null}
                      marginY={0}
                      paddingY={0}
                      paddingX={0}
                      centered={true}
                      fullWidth={true}
                      useInnerWrapper={true}
                    >
                      {children}
                    </AdaptiveLayout>
                  </Grid>
                  
                  <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                    <AdaptiveLayout
                      backgroundColor={null}
                      marginY={0}
                      paddingY={0}
                      paddingX={0}
                      centered={true}
                      fullWidth={true}
                      useInnerWrapper={true}
                    >
                      <Footer darkMode={darkMode} />
                    </AdaptiveLayout>
                  </Grid>
                </Grid>
              </Box>
            </Box>
            
            {/* AnimatedFooter placed before ScrollToTop */}
            <AnimatedFooter darkMode={darkMode} />
            
            {/* ScrollToTop moved after AnimatedFooter */}
            <ScrollToTop
              threshold={100}
              position={{
                bottom: 20,
                right: 20
              }}
              size="small"
            />
          </Box>
        </SnackBar>
      </ThemeProvider>
    </AppBarProvider>
  );
};

export default PublicLayout;